<!--做题页面-口语-->
<link rel="stylesheet" href="https://file.viplgw.cn/ui/thinku-ielts-new/css/evaluation/question.css">
<script src="/cn/js/jquery-1.12.2.min.js"></script>

<script type="text/javascript" src="https://file.viplgw.cn/ui/public/lib/vue/vue.js"></script>

<div id="speak" v-cloak>

    <div class="head">
        <input id="startTime" value="" type="hidden">
        <input id="maxtime" value="<?php echo $totalTime ?>" type="hidden">
        <input type="hidden" value="<?php echo isset($_GET['subjectId']) ? $_GET['subjectId'] : 1 ?>" id="subjectId">
        <input type="hidden" value="<?php echo isset($_GET['pubId']) ? $_GET['pubId'] : 1 ?>" id="pubId">

        <input type="hidden" value="<?php echo $nextSubject!=false ? $nextSubject : 0 ?>" id="nextSubjectId">
        <input type="hidden" value="<?php echo isset($_GET['page']) ? $_GET['page'] : 1  ?>" id="page">
        <input type="hidden" value="<?php echo $cateData['type'] ?>" id="type">
        <div class="container">
            <p class="headTitle">申友雅思-<?php echo $cateData['pidName'] ?>测评-<?php echo $cateData['name'] ?></p>
            <p class="timeStr"><img
                        src="https://file.viplgw.cn/ui/thinku-ielts-new/images/evaluation/result/cuttime.png"><span></span></p>
            <p class="quiteBtn" onclick="quite()"><img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/evaluation/result/quite.png" >Quit</p>
        </div>
    </div>
    <?php
    $page = isset($_GET['page']) ? $_GET['page'] : 1;
    $count = count($list[0]['son']);
    if ($count > 1) {
        $array = array_slice($list[0]['son'], $page - 1, 1);
    } ?>
    <input type="hidden" value="<?php echo $array[0]['id'] ?>" id="id">
    <input type="hidden" :value="upUrl" id="upUrl">
    <input type="hidden" value="<?php echo $array[0]['answer'] ?>" id="answer">
    <input type="hidden" value="<?php echo $count ?>" id="pageTotal">
    <input name="token" value="12345" type="hidden" id="token"><!--随机生成的token!!!!!!!!!!-->
    <div class="container main">
        <?php if ($array[0]['name']) { ?>
            <div class="section directions_box" style="max-height: 50%;overflow-y: auto"> <!--词汇题、翻译题、口语-->
                <p class="section_title">Directions:</p>
                <div class="directions_text"><?php echo $array[0]['article'] ?>
                </div>
            </div>
        <?php } ?>
        <div class="section question_box">
            <p class="section_title">Questions:</p>
            <div class="question_article"><?php echo $array[0]['name'] ?></div>
            <div class="speek_box">
                <div class="startCover" v-cloak v-show="recordStatus == -1">
                    <a href="javascript:void (0)" class="startBtn" @click="startRecord()" id="start-btn">
                        <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/evaluation/voice.png" alt="">
                    </a>
                    <p class="speakTip">点击按钮开始答题哦</p>
                </div>
                <!-- 音频设备提醒 -->
                <div class="equipTip" v-cloak v-if="isEquip">
                    <div class="equipTipCenter">
                        <img src="/cn/images/exerciseNew/chacha.png" alt="" class="closeEquip"
                             @click="isEquip = false,recordStatus = -1">
                        <p class="equipText">系统检测到您的电脑麦克风音频未开启，<br>
                            请检查音频情况！</p>
                        <div class="equipBtnCover">
                            <a href="javascript:void(0)" class="continueBtn" @click="isEquip = false,recordStatus = -1">继续做题</a>
                            <a href="javascript:void(0)" class="qdBtn" @click="isEquip = false,recordStatus = -1">确定</a>
                        </div>
                    </div>
                </div>
                <!-- 录音中 -->
                <div class="recordingCover" v-cloak v-show="recordStatus == 0||recordStatus == 1">
                    <a href="javascript:void (0)" class="stopBtn" @click="stopRecord" title="停止录音" id="close-btn">
                        <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/evaluation/pause.png" alt="">

                    </a>
                    <!-- 声音波浪 -->
                    <canvas id="waves"></canvas>
                    <!--            <img src="/cn/images/exerciseNew/28.png" alt="" class="wave">-->
                </div>
                <!-- 录音完成 -->
                <div class="recordOver" v-cloak v-show="recordStatus == 2 || recordStatus == 4">
                    <!-- 未上传 -->
                    <div v-if="recordStatus!=4" class="reanswer">
                        <p class="againTip">点击按钮可重新答题</p>
                        <a href="javascript:void (0)" class="startBtn">
                            <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/evaluation/voice.png" alt="">

                        </a>
                    </div>
                    <!-- 上传成功 -->
                    <div v-if="recordStatus==4" style="text-align: center;">
                        <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/evaluation/isUpload.png" alt="" style="width: 140px">

                        <p class="upSuccess">上传成功!</p>
                    </div>
                    <div class="operateBtnCover">
                        <!-- 音频地址 浏览器录音临时地址用于播放-->
                        <audio id="bgAudio" ref="audioPlayer" controls ></audio>
                        <p>你的答案：</p>
                        <div class="audioCover">
                            <a href="javascript:void(0)" class="playBtn"  v-if="!isPlay" @click="playAudio">
                                <img src="/cn/images/exerciseNew/17@2x.png" alt="">
                            </a>
                            <a href="javascript:void(0)" class="pauseBtn" v-if="isPlay" @click="playAudio">
                                <img src="/cn/images/exerciseNew/stop.png" alt="">
                            </a>
                            <p class="time">{{currentTime}}/{{totalTime}}</p>
                        </div>
                        <!-- 未上传 -->
                        <a href="javascript:void(0)" class="upLoadBtn" @click="upload"
                           v-if="recordStatus!=4&&recordStatus!=3">上传</a>
                        <!-- 上传中 -->
                        <a href="javascript:void(0)" class="upLoadBtn" v-if="recordStatus == 3">上传中</a>
                        <!-- 上传成功 -->
                        <a href="javascript:void(0)" class="upLoadBtn" @click="againAsk = true"
                           v-if="recordStatus==4">重录</a>
                    </div>
                </div>
                <!-- 重新答题提示 -->
                <div class="equipTip" v-cloak v-if="againAsk">
                    <div class="equipTipCenter">
                        <img src="/cn/images/exerciseNew/chacha.png" alt="" class="closeEquip" @click="againAsk = false">
                        <p class="equipText">是否重新开始答题</p>
                        <div class="equipBtnCover">
                            <a href="javascript:window.location.reload()" class="next">确定</a>
                            <a href="javascript:void(0)" class="qdBtn" @click="againAsk = false">没有</a>
                        </div>
                    </div>
                </div>
            </div>
            <p class="next_btn">
                <button class="" onclick="saveAnswer()">Next ></button>
            </p>
        </div>
    </div>
</div>
<div class="next_modal question_modal" style="display: none">
    <div class="modal_dialog">
        <div class="modal-title">
            Response Required
            <img onclick="closeModal(this)" src="https://file.viplgw.cn/ui/thinku-ielts-new/images/evaluation/close.png">
        </div>
        <div class="modal-body">
            <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/evaluation/warning.png">

            <p>要先选择答案才能继续下一题哦</p>
        </div>
        <div class="modal-footer">
            <button class="nextBtn" onclick="closeModal(this)">OK</button>
        </div>
    </div>
</div>
<div class="next_modal  Quite_modal" style="display: none">
    <div class="modal_dialog">
        <div class="modal-title">
            Quite
            <img onclick="closeModal(this)" src="https://file.viplgw.cn/ui/thinku-ielts-new/images/evaluation/close.png">
        </div>
        <div class="modal-body">
            <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/evaluation/warning.png">

            <p>是否确定退出，退出将不保留测评记录</p>
        </div>
        <div class="modal-footer">
            <button class="noBtn" onclick="closeModal(this)">No</button>
            <button class="yesBtn" onclick="pageBack()">Yes</button>
        </div>
    </div>
</div>
<script src="/cn/js/exerciseNew/wave.js?v=1.1"></script>

<script src="/cn/js/evaluation/speak.js">

</script>
<script src="/cn/js/evaluation/public.js"></script>

<script>
    var dirHei = $('.directions_box').height();
    var titleHei = $('.question_title').height();
    console.log('dirHei', dirHei)
    var quesHei = "calc(100% - " + dirHei + "px - 50px)";
    var tableHei = "calc(100% -  100px )";
    $('.question_box').css({'height': quesHei});
    $('.question_article').css({'height': tableHei})

    var startTime = Math.ceil(new Date().getTime() / 1000); //单位秒
    $('#startTime').val(startTime);
    cutTime();
</script>

